<template>
  <div class="wrapper" @click="click">
    <div class="content">
      <e-icon :icon-name="isFullscreen?'#退出全屏-02':'#全屏-02'" class="icon"/>
      <span class="screen-full-text">{{ isFullscreen ? '退出全屏' : '全屏显示' }}</span>
    </div>
  </div>
</template>
<script lang="ts">
import {Component, Vue} from 'vue-property-decorator';
import screenfull from 'screenfull';

@Component
export default class Screenfull extends Vue {
  isFullscreen = false;

  click() {
    if (!screenfull.isEnabled) {
      this.$message({
        message: '您的浏览器无法进入全屏模式',
        type: 'warning'
      });
      return false
    }
    screenfull.toggle()
  }

  change() {
    this.isFullscreen = screenfull.isFullscreen;
  }

  init() {
    if (screenfull.isEnabled) {
      screenfull.on('change', this.change)
    }
    //解决按f11时图标不变化的问题
    window.addEventListener("keydown", this.keyDown)// 监听按键事件
  }

  keyDown(event: KeyboardEvent) {
    if (event.code === 'F11') {
      //禁用f11
      event.preventDefault ? event.preventDefault() : event.returnValue = false
      //触发全屏的按钮
      this.click()
    }
  }

  destroy() {
    if (screenfull.isEnabled) {
      screenfull.off('change', this.change)
    }
    window.removeEventListener("keydown", this.keyDown)
  }

  mounted() {
    this.init()
  }

  beforeDestroy() {
    this.destroy()
  }
}
</script>

<style scoped lang="scss">
.wrapper {
  color: #ffffff;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 5px;
  cursor: pointer;
  user-select: none;

  .content {
    display: flex;
    align-items: center;

    .icon {
      width: 22px;
      height: 22px;
    }

    .screen-full-text {
      margin-left: 3px;
      font-size: 16px;
      line-height: 16px;
      height: 16px;
    }
  }

  &:hover {
    background-color: rgba(0, 0, 0, .1);
  }
}
</style>

